<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        /* #app {
            zoom: 1.5;
        } */

        .content {
            padding: 20px;
        }

        .content .van-col {
            margin-bottom: 15px;
        }

        .col-padding {
            padding: 0 10px;
        }

        .row {
            text-align: center;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0px 1px 5px rgb(200, 198, 198);
            position: relative;
        }

        .row-type {
            position: absolute;
            left: 0;
            top: 0;
            padding: 2px 5px;
            background: rgba(61, 134, 208, 0.5);
            color: #fff;
            font-size: 13px;
            border-top-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .row-title {
            font-size: 21px;
            height: 80px;
            position: relative;
        }

        .row-title span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
            color: #e6c678;
        }

        .stepper {
            padding: 12px 0;
            background-color: #ececec;
        }

        .van-stepper__input {
            margin: 0 6px;
            background-color: #fff;
        }

        .van-stepper__minus,
        .van-stepper__plus {
            background-color: #fff;
        }

        .top {
            width: 100%;
            padding-top: 5px;
            display: flex;
        }

        .topLeft {
            width: 50%;
            padding-left: 5px;
        }

        .top .van-button {
            margin-top: 10px;
            margin-left: 5px;
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="top">
                <div class="topLeft">
                    <van-button class="back" color="linear-gradient(#fffeaa, #c07d39)" type="primary" size="mini"
                        @click="historyBack()">返回
                    </van-button>
                </div>
            </div>

            <div class="content">
                <van-row>
                    <van-col span="4" v-for="(row,index) in badReasonList">
                        <div class="col-padding" @click="highlightIndex = index">
                            <div class="row" :class="highlightIndex== index?'highlight':''">
                                <div class="row-title"><span>{{row.ReasonName}}</span></div>
                                <div class="stepper" :class="row.number?'st-red':''">
                                    <van-stepper v-model="row.number" min="0" default-value="0" button-size="22px"
                                        input-width="30px" @change="lightToggle(index)">
                                    </van-stepper>
                                </div>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <div class="bottom">
                <div class="right-button">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" :disabled="ifConfirm" :loading="ifConfirm"
                        loading-text="提交中..." @click="confirmSub" style="float: right;">提交</van-button>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        vm = new Vue({
            el: '#app',
            data: {
                badReasonList: [],
                highlightIndex: 0,
                ifConfirm: false,
            },
            created: function () {
                var that = this;
                console.log('api', JSON.stringify(api.pageParam))

                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                that.getBadReasonList()
            },
            methods: {
                historyBack() {
                    api.closeFrame()
                },
                lightToggle(index) {
                    var that = this
                },
                getBadReasonList() {
                    var that = this
                    APP.ajax('getZSReasonType', {}, function (res) {
                        res.ds.map((item) => {
                            item.number = 0
                        })
                        that.badReasonList = res.ds
                    })
                },
                confirmSub() {
                    var that = this
                    that.badReasonList.map((item) => {
                        if (item.number) {
                            var obj = {
                                ZhuSuPlanID: api.pageParam.ZhuSuPlanID,
                                Creater: window.localStorage.getItem('loginName'),
                                ZhuSuReasonTypeID: item.ZhuSuReasonTypeID,
                                BadQTY: item.number,
                                ReasonName: item.ReasonName
                            }
                            // console.log('obj', JSON.stringify(obj))
                            APP.ajax('getZhuSuBroken', obj, function (res) {
                                // console.log('res', JSON.stringify(res))
                                if (res.ds[0].status == 200) {
                                    api.toast({
                                        msg: res.ds.msg,
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                    api.sendEvent({
                                        name: 'refreshBrowser',
                                        extra: {
                                            breadData: {
                                                name: '不良报废',
                                                url: 'badReason',
                                                ZS_FunctionID: 0,
                                                click: true
                                            }
                                        }
                                    })
                                    api.closeFrame()
                                }
                            })
                        }
                    })
                }
            }
        })
    };
</script>

</html>